<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>固定布局转换为百分比布局</title>
    <style type="text/css">
        /*body>*{ width:980px; height:auto; margin:0 auto; margin-top:10px;*/
            /*border:1px solid #000; padding:5px;}*/
        /*header{ height:50px;}*/
        /*section{ height:300px;}*/
        /*footer{ height:30px;}*/
        /*section>*{ height:100%; border:1px solid #000; float:left;}*/
        /*aside{ width:250px;}*/
        /*article{ width:700px; margin-left:10px;}*/


        body>*{ width:98%; height:auto; margin:0 auto; margin-top:10px;
            border:1px solid #000; padding:5px;}
        header{ height:50px;}
        section{ height:300px;}
        footer{ height:30px;}
        section>*{ height:100%; border:1px solid #000; float:left;}
        aside{ width:25.510204%;/*250÷980*/}
        article{ width:71.428571%; /*700÷980*/margin-left:1.020408%;}

    </style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
    <aside>aside</aside>
    <article>article</article>
</section>
<footer>footer</footer>
</body>
</html>
